<title>表单库</title>
<div class="layui-card layadmin-header">
	<div class="layui-breadcrumb" lay-filter="breadcrumb" lay-separator=">">
        <a lay-href=""><i class="layui-icon layui-icon-locate"></i>您当前的位置：</a>
		<a><cite>任务管理</cite></a>
		<a><cite>业务表单</cite></a>
	</div>
</div>

<div class="layui-fluid main-bg">
    <div class="iframeContent">
			<iframe id="mainFormIframe" class="systemManage-form" src="./TheForm/main.html" frameborder="0"></iframe>
		</div>
</div>

<style> 
  .systemManage-form{
    width: 100%;
    height: 830px;
  }
</style>

<!-- 表格模板 -->
<script type="text/html" id="lsczTaskTable">
  {{# if(d && d.length >0) { }}
    {{# layui.each(d, function(index, item){ 
    }}
        <table class="layui-table" model="insert" id="{{item.id}}" importfile="1">
            <thead>
                {{# if(item.cols && item.cols.length > 0){ }}
                    {{# layui.each(item.cols, function(index, col){ }}
                        <tr>
                            {{# layui.each(col, function(cndex, ctem){ }}
                                {{# if(ctem.field){ }}
                                <th colspan="{{ctem.colspan ? ctem.colspan : '1'}}" rowspan="{{ctem.rowspan ? ctem.rowspan : '1'}}"  model="normal" id="{{ctem.field}}" data_type="varchar" data_length="64" isfill="0" query="1" style="width:200px;word-break:break-all">{{ctem.title}}</th>
                                {{# }else{ }}
                                <th colspan="{{ctem.colspan ? ctem.colspan : '1'}}" rowspan="{{ctem.rowspan ? ctem.rowspan : '1'}}" style="width:200px;word-break:break-all">{{ctem.title}}</th>
                                {{# } }}
      
                            {{# }) }}
                        </tr>
                    {{# }) }}
                {{# } }}
            </thead>
            <tbody>
                {{# if(item.data.grid && item.data.grid.length > 0) {
                    layui.each(item.data.grid,function(gdex,gtem) { }}
                        <tr>
                            {{# layui.each(item.form_field,function(hdex,htem) { }}
                                <td>{{gtem[htem.fieldenglish]}}</td>
                            {{# }) }}
                        </tr>
                {{# 
                    })
                    }else {
                }}
                {{# var count = 0;if(item.cols){ }}
                    {{# layui.each(item.cols[0], function(i, col){
                        col.colspan ? count += parseInt(col.colspan) : count += 1;
                    }) }}
                {{# } }}
                <!-- <tr>
                    {{# for(var i = 0; i < count; i++){ }}
                      <td></td>
                    {{# } }}
                </tr> -->
                {{#
                    }
                }}
            </tbody>
        </table>
        {{# }) }}
    {{# } }}

</script>

<script>
    layui.use(['admin', 'view', 'table', 'tools', 'laytpl'], function(){
      var admin = layui.admin,
          view = layui.view,
          table = layui.table,
          tools = layui.tools,
          laytpl = layui.laytpl,
          layout = ['#treeDemo', '#metaTree', 'table'];
        
      //表单预览
      var frm = document.getElementById('mainFormIframe');
      $(frm).load(function(){
        var iContent = frm.contentWindow,
            previewBtn = $('#mainFormIframe').contents().find('#preview'),
            tableNameIpt = $('#mainFormIframe').contents().find('.caption'),
            importBtn = $('#mainFormIframe').contents().find('.file'),
            uploadForm = iContent.document.getElementById('uploadForm'),
            uploadUrl = '/start/myapi/DC/api/rest/web/custom/parseComplexTableHeaders';
            window.fileChangeFlag=false;

          //表单预览
          previewBtn.click(function(){
            var div = document.createElement('div'), formContent = iContent.leipiEditor.getContent();
            div.innerHTML = formContent;
            var cols = iContent.leipiFormDesign.getCols(div), selectNode = iContent.window.iframeZtree.getSelectedNodes()[0];
            if(cols && cols.length > 0){
              layer.open({  
                id: 'formView',
                title:'<i class="formFill-icon"></i><span style="color:#FFF;">表单预览</span>',
                offset: '50px',
                type: 1,
                shadeClose: true,
                area: ['1250px', '550px'],
                success: function(lay){
                    view(this.id).render('./fill/components/formView',{ cols: cols, formname: selectNode.text });
                }
              });
            }else{
              layer.msg('暂无表格预览');
            }
        });

        //监听文件改变
        importBtn.change(function(){
            var form = $('#mainFormIframe').contents().find('form[name=fileForm]');
            tools.ajaxSubmitFile(uploadUrl, form, {},  success = function(result){
                var res = eval("("+result+")");
                if(res.retcode == 0){
                    var data = [{ cols:res.data.data, id: tools.createUniqueId('s_'), data:{grid:[]} }],
                        getTpl = lsczTaskTable.innerHTML;
                    fileChangeFlag=true;
                    $(tableNameIpt).val(res.data.name);
                    laytpl(getTpl).render(data, function(html){
                        iContent.leipiEditor.setContent(html);
                    });
                    uploadForm && uploadForm.reset();
                }else{
                    layer.msg(res.retmsg);
                }
            });
        });
        
        tools.setFont(layout, '', 'mainFormIframe');
      });
    });
</script>